/*
 * @Author: shiguo
 * @Date: 2022-09-26 17:57:18
 * @LastEditors: shiguo
 * @LastEditTime: 2022-09-26 18:17:20
 * @FilePath: /@aks-dev/taro-h5/lib/Flex/index.tsx
 */


import { View } from "@tarojs/components";
import React from "react";
import type { FlexProps } from '../../types/Flex';


/**
 * 
 *     direction?: 'row' | 'row-reverse' | 'column' | 'column-reverse';
    wrap?: 'nowrap' | 'wrap' | 'wrap-reverse';
    justify?: 'start' | 'end' | 'center' | 'between' | 'around';
    align?: 'start' | 'center' | 'end' | 'baseline' | 'stretch';
    style?: React.CSSProperties;
    onClick?: (e: ITouchEvent) => void;
    children?: React.ReactNode;
    className?:string;
    alignContent?: 'start' | 'end' | 'center' | 'between' | 'around' | 'stretch';
 * 
 * @param props 
 * 
 * @returns 
 */
export const Flex:
    React.FC<FlexProps>
    = props =>
        React.createElement(View,
            {
                className: props.className,
                style: {
                    display: 'flex',
                    flexDirection: props.direction,
                    flexWrap: props.wrap,
                    justifyContent: (() => {
                        switch (props.justify) {
                            case 'start': return 'flex-start';
                            case 'end': return 'flex-end';
                            case 'between': return 'space-between';
                            case 'around': return 'space-around';
                            default: break;
                        }
                        return props.justify
                    })(),
                    alignItems: (() => {
                        switch (props.align) {
                            case 'start': return 'flex-start';
                            case 'end': return 'flex-end';
                            default: break;
                        }
                        return props.align
                    })(),
                    alignContent: (() => {
                        switch (props.alignContent) {
                            case 'start': return 'flex-start';
                            case 'end': return 'flex-end';
                            case 'between': return 'space-between';
                            case 'around': return 'space-around';
                            default: break;
                        }
                        return props.alignContent
                    })(),
                    ...props.style
                },
                onClick: e => props.onClick && props.onClick(e),

            },
            props.children
        )



